<template>
  <div class="book-list-item">
    <div class="pic">
      <img :src="item.bigImgUrl" alt="" />
    </div>
    <div class="content">
      <p class="title">
        <router-link
          :to="{ name: 'book', params: { id: item.id } }"
          target="_blank"
        >
          {{ item.title }}
        </router-link>
      </p>
      <p>
        <span class="fact-price">
          {{ currency(factPrice(item.price, item.discount)) }}
        </span>
        <span>
          定价：<i class="price">{{ currency(item.price) }}</i>
        </span>
      </p>
      <p>
        <span>{{ item.author }}</span
        >/ <span>{{ item.publishDate }}</span
        >/
        <span>{{ item.bookConcern }}</span>
      </p>
      <p>
        {{ item.brief }}
      </p>
      <p>
        <button class="add-cart-button" @click="addCartItem(item)">
          加入购物车
        </button>
      </p>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "BookListItem",
  props: {
    item: {
      type: Object,
      default: () => {},
    },
  },
  inject: ["factPrice", "currency"],
  methods: {
    ...mapActions("cart", {
      addCart: "addProductToCart",
    }),
    addCartItem(item) {
      let quantity = 1;
      let newItem = {
        ...item,
        price: this.factPrice(item.price, item.discount),
        quantity,
      };
      this.addCart(newItem);
      this.$router.push("/cart");
    },
  },
};
</script>
<style scoped>
.book-list-item {
  display: flex;
  margin: 0 10% 1% 10%;
  width: 80%;
  border-radius: 20px;
  border: 1px solid #528598;
  padding: 10px;
  transition: 0.8s;
}
.book-list-item:hover {
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.336);
}
.book-list-item img {
  width: 200px;
}
.price {
  color: rgba(128, 128, 128, 0.603);
  text-decoration-line: line-through;
}
.add-cart-button {
  border: none;
  background: red;
  color: white;
  width: 80px;
  height: 26px;
  cursor: pointer;
}
.content {
  padding-right: 10px;
}
</style>
